<template>
  <div>
    <van-popup v-model="show" position="bottom" @closed="closed">
      <van-datetime-picker
        v-model="currentDate"
        @confirm="onConfirm"
        @cancel="onCancel"
        :show-toolbar="true"
        v-bind="dateConfig"
      />
    </van-popup>
  </div>
</template>

<script>
import { dateTimeFormatter } from '@/utils/formatTools';
export default {
  name: '',
  props: {
    valueFormat: {
      //yyyy-MM-dd hh:mm
      type: String,
      required: true,
    },
    dating: {
      type: [Boolean, Object],
      default: false,
    },
  },
  data() {
    return {
      show: false,
      defaultConfig: {
        type: 'date',
      },
      currentDate: new Date(),
    };
  },
  computed: {
    dateConfig() {
      if (typeof this.dating === 'boolean') {
        return null;
      }
      return {
        ...this.defaultConfig,
        ...this.dating,
      };
    },
  },
  methods: {
    open(time) {
      this.currentDate = time;
      this.show = true;
    },
    onConfirm(value) {
      let date = this.GMTToStr(value);
      this.$emit('input', date);
      this.$emit('change', date);
      console.log(date);
      this.show = false;
    },
    onCancel() {
      this.show = false;
    },
    GMTToStr(time) {
      let date = new Date(time);
      let str = dateTimeFormatter(date, this.valueFormat);
      return str;
    },
    closed(){
      console.log('close')
      this.$emit('closed')
    }
  },
};
</script>

<style lang="" scoped></style>
